<template>
  <button
    class="v-button"
    type="button"
    :class="classes"
    :style="styles"
    @click="click"
    :disabled="disabled"
  >
    <slot></slot>
  </button>
</template>

<script>
export default {
  name: 'vbutton',
  props: {
    type: {
      type: String,
      default: 'default',
    },
    style: Object,
    size: String,
    disabled: Boolean,
    ghost: Boolean,
    flat: Boolean,
    round: Boolean,
    className: String,
  },
  computed: {
    classes() {
      return [
        {
          'v-button-flat': this.flat,
          'v-button-round': this.round,
          [`v-button-ghost-${this.type}`]: this.ghost || this.flat,
          [`v-button-${this.type}`]: !this.ghost && !this.flat,
        },
        this.className,
      ]
    },
    styles() {
      const styles = this.style ? { ...this.style } : {}
      const size = this.size ? this.size.split(/\s/) : []

      if (size.length) {
        styles.width = size[0]
        styles.height = size[1]
        styles.display = 'inline-block'
      }

      return styles
    },
  },
  methods: {
    click() {
      this.$emit('click')
    },
  },
}
</script>

<style lang="scss">
@import "~styles/include";

.v-button {
  appearance: none;
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  color: inherit;
  display: block;
  font-size: 16px;
  height: 48px;
  outline: 0;
  overflow: hidden;
  position: relative;
  text-align: center;
  width: 100%;
  background-color: #fff;
  &:disabled {
    pointer-events: none;
    border-color: transparent;
  }
}

.v-button-ghost-danger {
  border-color: $primaryColor;
  color: $primaryColor;
  border-radius: 4px;
  &:active {
    background-color: #fdc6c8;
  }
  &:disabled {
    color: $disabledColor;
    // pointer-events: none;
  }
}

.v-button-ghost-default {
  &:active {
    background-color: #DFDFDF;
  }
  &:disabled {
    color: $disabledColor;
    // pointer-events: none;
  }
}

.v-button-danger {
  background-color: #FF464E;
  color: #fff;
  &:active {
    background-color: #CD3A40;
    color: #FBECEE;
  }
  &:disabled {
    background-color: #DCDCDC;
    color: #fff;
    // pointer-events: none;
  }
}

.v-button-default {
  border-color: $parimaryFontColor;
  &:active {
    background-color: #DFDFDF;
  }
}

.v-button-flat {
  border-color: transparent !important;
  border-radius: 0 !important;
}

.v-button-round {
  border-radius: 1000px !important;
}
</style>
